<div class="row">
  <x-button (click)="open()">Custom title</x-button>
  <x-button (click)="openTable()">table</x-button>
  <x-button (click)="openForm()">form</x-button>

  <x-drawer [title]="titleTpl" [visible]="visible" (close)="close()">
    <span>content</span>
  </x-drawer>

  <ng-template #titleTpl>
    <x-icon type="fto-user"></x-icon>
    <span>user info</span>
  </ng-template>

  <x-drawer title="table" size="50%" [visible]="visibleTable" (close)="closeTable()">
    <table class="custom-table">
      <tr>
        <th>user</th>
        <th>email</th>
        <th>state</th>
      </tr>
      <tr>
        <td>admin</td>
        <td>admin@admin.com</td>
        <td>enabled</td>
      </tr>
      <tr>
        <td>john</td>
        <td>john@john.com</td>
        <td>disabled</td>
      </tr>
      <tr>
        <td>jack</td>
        <td>jack@jack.com</td>
        <td>enabled</td>
      </tr>
    </table>
  </x-drawer>

  <x-drawer title="form" [visible]="visibleForm" placement="left" (close)="closeForm()">
    <ul class="custom-form">
      <li><x-input label="user" direction="row"></x-input></li>
      <li><x-input label="email" direction="row"></x-input></li>
      <li><x-radio [data]="['enabled', 'disabled']" [ngModel]="'enabled'"></x-radio></li>
      <li>
        <x-buttons space="1">
          <x-button>cancel</x-button>
          <x-button type="primary">submit</x-button>
        </x-buttons>
      </li>
    </ul>
  </x-drawer>
</div>
